/**
 * 第五步：组件生成
 * 允许用户选择要生成的功能性组件/页面（如 登录、菜单）。
 */
import React, { useMemo } from 'react';
import { Form, Checkbox, Typography, Alert } from 'antd';
import type { CheckboxOptionType } from 'antd/es/checkbox';
import { FormInstance } from 'antd';

const { Title, Paragraph, Text } = Typography;

interface ComponentGenerationStepProps {
  form: FormInstance;
}

const options: CheckboxOptionType[] = [
  { label: '登录组件', value: 'login' },
  { label: '菜单组件', value: 'menu' },
];

const helperNotes: Record<string, string> = {
  login: '将生成基础登录页（账号/密码）及最小化的认证流程占位（可后续接入真实鉴权）。',
  menu: '将生成侧边栏菜单脚手架（含示例路由与菜单数据对接）。',
};

const ComponentGenerationStep: React.FC<ComponentGenerationStepProps> = ({ form }) => {
  const selected: string[] = Form.useWatch('generatedComponents', form) || [];

  const notes = useMemo(() => {
    if (!selected.length) return null;
    return selected.map((k) => helperNotes[k]).filter(Boolean).join(' ');
  }, [selected]);

  return (
    <div>
      <Title level={4}>组件生成</Title>
      <Paragraph>
        请选择需要自动生成的功能组件。可先生成脚手架，后续再接入真实业务逻辑。
      </Paragraph>

      <Form.Item name="generatedComponents" label="要生成的组件">
        <Checkbox.Group options={options} />
      </Form.Item>

      {notes && (
        <Alert
          type="info"
          showIcon
          message={<Text strong>将包含以下脚手架内容：</Text>}
          description={<span>{notes}</span>}
          style={{ marginTop: 8 }}
        />
      )}

      <div className="bg-blue-50 p-3 rounded-md mt-4">
        <Text type="secondary" className="text-sm">
          提示：本步骤仅控制代码脚手架的生成（页面、路由、菜单占位等），依赖安装请在“组件选择”步骤处理。
        </Text>
      </div>
    </div>
  );
};

export default ComponentGenerationStep;
